<template>
    <h1>我是APP组件</h1>

    <h1>$store.state.num: {{ $store.state.num }}</h1>
    <h1>mapState 简化：{{ num }}</h1>

    <hr />
    <button @click="setNum">修改 num 的值 (错误版)</button>
    <button @click="setNum2">修改 num 的值 ($store.commit('addNum'))</button>
    <button @click="setNum3">修改 num 的值 (...mapMutations(['addNum']))</button>

    <hr />
    <button @click="setNum4">异步修改 num 的值 ($store.dispatch('asyncAddNum'))</button>
    <button @click="setNum5">异步修改 num 的值 (...mapActions(['asyncAddNum']))</button>

    <hr>
    <h1> $store.getters.属性名: {{ $store.getters.getterName }}</h1>

    <!-- 3. 使用 通过 mapGetters 结构进来的计算属性 -->
    <h1> mapGetters: {{ getterName }} </h1>


    <hr>
    <!-- 使用 子模块的数据 -->
    <h1> {{ $store.state.stu.name }} --- {{ $store.state.stu.age }} </h1>
</template>

<script>
//1，导入辅助函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {}
    },
    methods: {
        //结构 vuex 中 mutations 中的一些方法
        ...mapMutations(['addNum']),

        ...mapActions(['asyncAddNum']),

        setNum() {
            // this.$store.state.num++
            // this.num++
        },

        setNum2() {
            // console.log(this.$store)
            this.$store.commit('addNum')
        },

        setNum3() {
            //结构 完成后, 我们可以直接通过 this.XXX 去调用 vuex 中 mutations 内的一些方法
            this.addNum()
        },

        setNum4() {
            this.$store.dispatch('asyncAddNum')
        },

        setNum5() {
            this.asyncAddNum()
        }
    },
    computed: {
        ...mapState(['num', 'num3']),
        ...mapGetters(['getterName'])
    }
}
</script>

<style></style>
